<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
<script>
    const $=obj=>[...document.querySelectorAll(obj)];
    console.log($('div'))   //找到页面所有的div
// ------------------------------------------------------------------------------------------------
    //与数组配合使用
    //什么set？请你说一下set数据结构 
    //es6 提供了新的数据结构。
    //特性 类似数组 但是成员的值是唯一的（禁止重复） 没有重复的值  向Set加入值的时候不会发生类型转换  
    //set 本身是一个构造函数 用来生成 set数据结构  
    
    
//下面的方法(操作方法) 
    // const s = new Set()
    // s.add(1)                  //添加一个值 返回set本身               //添加数据
    // s.delete(value 删除的值 ) //删除某个值  返回布尔类型  表示是否删除本身
    // s.has(value)              //返回一个布尔 表示value是否是set 成员//查找有没有数据
    // s.clear(value)            //直接清除所有的数据 没有返回值
    // s.size()                  //同类似lenght指长度                  //重复不算
    // s.keys() values()         //两个相同  都是i



    const s = new Set();
    [1,2,3,4,5,5,5,5,].forEach(x => s.add(x));    //在这里 通过add方法结构加入成员 结果表明set不会添加重复的值 
    for(let i of s){
        console.log(i);
    }
    





      //Set结构的实例与数据一样 也拥有forEach方法。用于对每一个成员执行某种操作
       s.forEach(e=>{
           console.log(e)  //1，2，3，4，5
       })


       var arr = [1,2,2,2,2,1,2,3]
       console.log([...new Set(arr)])              
       //1,2,3


    //set函数还可以接收 一个数组 作为参数 用来初始化 
       const set = new Set([1,2,3,4,4,4])
       console.log([...set])
        //[1,2,3,4]   

        const items = new Set([1,2,3,4,4,4,4])
        console.log(items.size)              //不会计算重复的值 size似length
    //4    


    var set = new Set()
    set.add(1);
    set.add(2);
    set.add(3);
    set.add(4);
    set.add(4);
    //set.delete(1); //删除掉1 
    console.log(set)       // {1,2,3}
    console.log(set.has(1)) //true 有返回真 没有返回假
    console.log(set.has(5)) //false 
    console.log(set.size)   //3 
    console.log(set.values()) //输出i  
    for(var i of set.values()){
        console.log(i)        // 1 2 3
    }   
    
    //arr 去重
    var arr = [1,2,3,4,5]
    var arr2 = [1,2,3,4,5,6,7,7]
    var set =new Set([...arr,...arr2])     
    console.log(set)       //{1, 2, 3, 4, 5, …}
    var arr3 = [...set]
    console.log(arr3)       // [1, 2, 3, 4, 5, 6, 7]


//下面循环操作(便利方法)
    //set结构的实例 有4个便利方法 可以用于便利成员 
    //keys()      返回遍历键名的 
    //valuse()    返回键值得
    //entries()   返回键值对的
    //forEach()   使用回调函数循环每个成员的 
     
    //这三个方法都是循环数组 搭配for...of使用  
    //区别是 keys是对键名的循环   values是对键值的循环   entires是对键值对儿的循环 
    for(let index of [a,b].keys()){
        console.log(index);
    }    
    // 0 1 
    for(let elem of [a,b].values()){
        console.log(elem)
    }
    // a b 
    for(let [index,elem] of [a,b].entries()){
        console.log(index,elem)
    }
    //0 "a"
    //1 "b"


    //forEach 方法对每个成员 执行某种操作 没有返回值 
    let set = new Set([1,2,3])
    set.forEach((v,i)=>console.log(v*2))
    // 2 4 6 


    //使用set 可以很容易的实现 数组的 并集 交际 差集 
    let a = new Set([1,2,3])
    let b = new Set([4,3,2])
    //并集 
    let union = new Set([...a,...b])
    //Set [1,2,3,4]
    //交集 
    let jj = new Set([...a].filter(x=>b.has(x)))
    //set [2,3]
    //差集 
    let cj = new Set([...a].filter(x=>!b.has(X)));
    // 1



    
     
// ---------------------------------------------------------------------------------
    //与json配合使用无敌  
    //josn & map 都是键值对儿   不能存重复的key会覆盖
    //set()      设置值
    //get("key") 拿它的key取它的value 

    var mapNode = new Map()
    mapNode.set("王帅",'脑子瘸了')
    mapNode.set("晓芳","200kg")
    console.log(mapNode)    //{"王帅" => "脑子瘸了"}
                            //{"王帅" => "脑子瘸了", "晓芳" => "200kg"}

    console.log(mapNode.get("晓芳")) //200kg

    for(let [k,v] of mapNode){
        console.log(k,v)        
    }
            //王帅  脑子瘸了    晓芳   200kg

    //map与es5的json有什么区别？
        //在es5中 只能用字符串作为键 (带来了限制) 
        //Map数据存在 键 - 值；且键可以是 任意类型（弥补了ES5中对象的键只能是字符串）









</script>